<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="../css/login.css">
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="login">
    <h1>Login</h1>
    <form method="post">
        <input type="text" required="required" placeholder="用户名" name="username" id="username">
        <input type="password" required="required" placeholder="密码" name="password" id="password">
        <button type="button" class="but" id="login-btn">登录</button>
    </form>
</div>
</body>
</html>
<script>
    // 登录验证
    $("#login-btn").click(function () {
        $.ajax({
            url: "../checkLogin",
            type: "post",
            data: {
                username: $("#username").val(),
                password: $("#password").val(),
            },
            headers:{
                // admin + 123456
                "X-Access-Token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1ODk5NDYzNTcsInVzZXJuYW1lIjoiYWRtaW4ifQ.g0ibmKEDDBzKSAXkbioQL4phG1Bl7UvDqJn-klfeSTg"
            },
            success: function (data) {
                var code = data.code;
                var msg = data.msg;
                alert(code + "--" +msg)
                console.log("登录请求返回：");
                if (data.code=="LOGIN_SUCCESS") {
                    alert()
                    console.log(data);
                } else {
                    console.log(data);
                }
            },
            error:function (data) {
                console.log("登录请求返回：失败");

            }
        })
    })
</script>
<style>
    html {
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-style: sans-serif;
    }

    body {
        width: 100%;
        height: 100%;
        font-family: 'Open Sans', sans-serif;
        margin: 0;
        background-color: #4A374A;
    }

    #login {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -150px 0 0 -150px;
        width: 300px;
        height: 300px;
    }

    #login h1 {
        color: #fff;
        text-shadow: 0 0 10px;
        letter-spacing: 1px;
        text-align: center;
    }

    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }

    input {
        width: 278px;
        height: 18px;
        margin-bottom: 10px;
        outline: none;
        padding: 10px;
        font-size: 13px;
        color: #fff;
        text-shadow: 1px 1px 1px;
        border-top: 1px solid #312E3D;
        border-left: 1px solid #312E3D;
        border-right: 1px solid #312E3D;
        border-bottom: 1px solid #56536A;
        border-radius: 4px;
        background-color: #2D2D3F;
    }

    .but {
        width: 300px;
        min-height: 20px;
        display: block;
        background-color: #4a77d4;
        border: 1px solid #3762bc;
        color: #fff;
        padding: 9px 14px;
        font-size: 15px;
        line-height: normal;
        border-radius: 5px;
        margin: 0;
    }
</style>